<template>
  <div>
    <div id="f">
      <div ref="ec" id="ec"></div>
    </div> 
    <div id="ff">
      <div class="circle-main">
    <div class="circle-main-box" :style="[{ 'width': size+'px','height': size+'px'}]">
      <svg :width="size" :height="size" class="circle">
        <circle
          :r="radius"
          :cx="cx"
          :cy="cy"
          fill="transparent"
          stroke="#EEEEEE"
          :stroke-width="strokeWidth"
        />
        <circle
          :r="radius"
          :cx="cx"
          :cy="cy"
          fill="transparent"
          :stroke="color"
          :stroke-width="strokeWidth"
          stroke-linecap="round"
          :stroke-dasharray="circumference"
          :stroke-dashoffset="progress"
        />
      </svg> 
      <form class="ddc">{{yData[3]}}/10000</form>
      <input  v-if="parseInt(countDown)<0|parseInt(countDown)>100" :v-model="z++" type="hidden"/>
      <span class="count-num" :style="[{ 'font-size': size*.3+'px'}]" v-else>{{countDown}}%</span>
      <div id="ex" ><button @click="t(now++)">添加</button>&nbsp;&nbsp;&nbsp;
      <button @click="x(now--)"> 减少</button></div>
    </div>
   
  </div>
  <div id="One">
   <h3 v-for="(p,index) in yData" :key="index">
    {{index+1}}月收入:{{ p }}$
    <input type="text" style="width: 100px;" placeholder="输入1-100" :id="index" >&nbsp;
    <button @click="xg(index)">修改</button>
  </h3>
  </div>
  
    </div>
</div>

</template>

<script >
import * as echarts from "echarts";

export default {
    name:"Home",
    data() {
    return {
       yData : [1000,3000,5000,localStorage.getItem("aa")],     
      now: localStorage.getItem("xx"),
      z:11,
      d:"1",
    };

  },
  props: {
    // 进度值
    value: {
      type: [String, Number],
      default: 20000
    },
    // 尺寸
    size: {
      type: [String, Number],
      default: 120
    },
    // 边框粗细
    strokeWidth:{
      type: [String, Number],
      default: 10
    },
    // 进度条颜色
    color: {
      type: String,
      default: "rgba(153,202,251,1)"
    },
    // 动画执行时间
    duration:{
      type: [String, Number],
      default: 1000
    }
  },
  methods:{
    ll(){
      this.$bus.$on("xxdd",(df)=>{
      this.d = df
      });
      alert(this.d)
    },
    t(x){
      this.now = x+1,
      this.yData[3] = (x+1)*100,
      localStorage.setItem("xx",this.now)
  localStorage.setItem("aa",this.yData[3])
  location.reload()
     },
     x(x){
      this.now = x-1
      this.yData[3] = (x-1)*100
      localStorage.setItem("xx",this.now)
  localStorage.setItem("aa",this.yData[3])
  location.reload()
     },
     xg(f){
      let d = document.getElementById(""+f).value 
      let a = localStorage.getItem("aa")
      let aa = localStorage.getItem("xx")
      if(d<=0 | d>100){
        alert("输入有误")
        localStorage.setItem("aa",a)
      localStorage.setItem("xx",aa)
      location.reload()
      }else{

      let One = d*100
      localStorage.setItem("aa",One)
      localStorage.setItem("xx",d)
      location.reload()
      // x = this.yData[f]
     }
     }
  },
  computed: {
     
    percentage() {
      return this.value;
    },
    countDown() {
      return localStorage.getItem("xx");
    },
    // 圆心x轴坐标
    cx() {
      return this.size / 2;
    },
    // 圆心y轴坐标  
    cy() {
      return this.size / 2;
    },
    // 半径
    radius() {
      return (this.size - this.strokeWidth) / 2;
    },
    // 圆周长
    circumference() {
      return 2 * Math.PI * this.radius;
    },
    // 进度长度  
    progress() {
      return (1 - localStorage.getItem("xx") / 100) * this.circumference;
    }
  },

    mounted(){
        let mc = echarts.init(this.$refs.ec) //初始化echarts
        //设置echarts的数据
            //设置轴数据
        let xData = ["1月","2月","3月","4月"];
            //定义数据
           
  
        //设置echarts配置项
        let option = {
            title:{
                text:"每月收益图"
            },
            xAxis:{//配置x轴的参数
                data:xData,
                type:"category" //坐标轴类型 value数据轴 category类目轴
            },
            yAxis:{//y轴相关配置
          
            },
 
            series:[//系列 配置图表的类型
                {
                    name:"展示",
                    type:"bar", //系列名：当前的系列类别 bar柱状图
                    data:[this.yData[0],this.yData[1],this.yData[2],localStorage.getItem("aa")], //数据
                }
            ]
        }
        //绘制图表
        mc.setOption(option);  
   

    },
    watch:{
                immediate:true,
                z:{
                handler(newvalue,oldValue){
                  let  x =localStorage.getItem("aa") 
                  let  f  = localStorage.getItem("xx")
                  if( x>10000){
                    x=10000;
                    f=100
                  }
                  if(x<0 ){
                    x=100;
                    f=1
                  }
                   localStorage.setItem("aa",x)
                   localStorage.setItem("xx",f)
                  location.reload()
                  
                }
            },
            }
}
</script>

<style>
.ddc{
  position: absolute;
  top: -30px;
  left: 10px;
}
#One{
  border-radius: 15px;
  position: absolute;
  left: 230px;
  width: 350px;
  height: 200px;
  background-color: #ffffff;
}
#ex{
  position: absolute;
  top: 120px;
  left: 10px;
}
.count-num{
  position: absolute;
  left: 12%;
  top: 30%;
}
.circle-main{
  position: absolute;
  left: 20%;
  top: 20%;
  
}
#ff{
  border-radius: 15px;
  position: absolute;
  left: 560px;
  top: 30px;
  width: 200px;
  height: 200px;
  background-color: #fff;
}
#f{
  border-radius: 15px;
  position: absolute;
  top: 30px;
  left: 30px;
  width: 500px;
  height: 500px;
  background-color: #fff;
}

#ec{
  border-radius: 15px;
    width: 500px;
    height: 500px;
    border: 1px solid rgb(255, 255, 255,0.5);
}

</style>